<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150" style="padding-right: 150px">
    <Form-item label="卡类型名称" prop="name">
      <Input v-model="formValidate.name"></Input>
    </Form-item>
    <Form-item label="卡有效期" prop="time_limit">
      <Row>
        <Col span="18">
        <Input v-model="formValidate.time_limit"></Input>
        </Col>
        <Col span="1" style="text-align: center">---</Col>
        <Col span="5">
        <Select v-model="formValidate.limit_type">
          <Option :value="1">天</Option>
          <Option :value="2">周</Option>
          <Option :value="3">月</Option>
          <Option :value="4">季</Option>
          <Option :value="5">年</Option>
        </Select>
        </Col>
      </Row>
    </Form-item>

    <Form-item label="卡类型">
      <Select v-model="formValidate.card_type" @on-change="CardTypeChange">
        <Option :value="2">时间卡</Option>
        <Option :value="1">次卡</Option>
        <Option :value="3">时段卡</Option>
      </Select>
    </Form-item>

    <Form-item label="次数" v-show=" formValidate.card_type === 1 " prop="number_of_time">
      <Input v-model="formValidate.number_of_time" ></Input>
    </Form-item>

    <Form-item label="时间段" v-show=" formValidate.card_type === 3 ">
      <Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>
    </Form-item>

    <Form-item>
      <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
      <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </Form-item>
  </Form>
</template>

<script>
  import { RuleArray } from '../../rule/rule'
  import { RequestCardTypeDetail } from '../../api/api'
  export default {
    data () {
      return {
        formValidate: {
          name: '',
          time_limit: '',
          limit_type: '',
          card_type: 2,
          number_of_time: ''
        },
        ruleValidate: RuleArray
      }
    },
    methods: {
      handleChange (value) {
        console.log(value)
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!')
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      },
      CardTypeChange (value) {
        console.log(value)
      },
      loadData () {
        RequestCardTypeDetail({id:this.$route.query.id}).then(function (resp) {

        })
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.loadData()
      })
    }
  }
</script>
